<template>
    <!-- <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;">
        <svg-icon name="developing" width="300px" height="300px" style="margin-top: -10px;" />
        <div style="font-size: 24px; color: var(--el-text-color-regular);">敬请期待...</div>
    </div> -->
    <div class="risk-indicator-detail">
        <!-- -- 上半部分公式区域 -->
        <div class="formula-section">            
            <div class="formula-box">
                <div class="partTitle" style="margin: 9px 0px 8px;">计算公式</div>
                <div class="formula-content">
                    <div class="formula-text">
                        <span>权益类证券及其衍生品规模</span>&nbsp;
                        <span> (&nbsp;计算结果：</span>
                        <span class="result-value">{{ totalResult }}</span>&nbsp;
                        <span class="result-label">亿&nbsp;)&nbsp;=&nbsp;</span>
                        <span></span>
                    </div>                        
                    <div class="formula-items">
                        <template v-for="(item, index) in formulaItems" :key="item.id">
                            <span class="formula-item" :class="{ active: selectedItem === item.id }"
                                @click="handleFormulaClick(item.id)">
                                {{ item.name }}(&nbsp;{{ item.value }}{{item.unit}}&nbsp;)
                            </span>
                            <span v-if="item.ratio" style="font-family:cursive;">&nbsp;*&nbsp;</span>
                            <span v-if="item.ratio" style="font-weight: 600;">{{ item.ratio }}</span>
                            <span v-if="index < formulaItems.length - 1" class="operator">+</span>
                        </template>
                    </div>                    
                </div>
            </div>
        </div>
       <!-- --下半部分明细表格 -->
        <div class="detail-section elResetBody">
            <div class="partTitle" style="margin: 9px 0px 8px;">明细数据</div>
            <el-table :data="filteredDetails" style="width: 100%" header-row-class-name="table-header" highlight-current-row>
                <el-table-column prop="date" label="日期" width="120" />
                <el-table-column prop="item" label="项目" width="150" />
                <el-table-column prop="value" label="数值" width="120" />
                <el-table-column prop="description" label="详细说明" />
            </el-table>
        </div>
    </div>
</template>

<script lang="tsx" setup>
interface FormulaItem {
    id: string
    name: string
    value: number
    ratio?: number
    unit:string
}

interface DetailItem {
    id: string
    itemId: string
    date: string
    item: string
    value: number
    description: string
    unit:string
}

// 公式数据
const formulaItems = reactive<FormulaItem[]>([
    { id: 'stock', name: '股票市值', value: 4.58,unit:'亿' },
    { id: 'fund', name: '权益类基金市值', value: 2.35,unit:'亿'},
    { id: 'future', name: '股指期货名义价值', value: 1.28, ratio: 0.15,unit:'亿' },
    { id: 'swap', name: '权益互换名义价值', value: 9.80, ratio: 0.1,unit:'亿' },
    { id: 'option_buy', name: '买入期权投资规模', value: 5.5,unit:'亿' },
    { id: 'option_sell', name: '卖出场内期权Delta', value: 3.2, ratio: 0.15,unit:'亿' },
    { id: 'option_otc', name: '卖出场外期权', value: 2.1,unit:'亿' }
])

// 明细数据
const detailItems = reactive<DetailItem[]>([
    // 这里填充示例数据，实际项目从接口获取
    { id: '1', itemId: 'stock', date: '2023-08-01', item: '股票A', value: 12.0, description: '上证A股',unit:'亿' },
    { id: '2', itemId: 'stock', date: '2023-08-01', item: '股票B', value: 9.8, description: '深证A股',unit:'亿' },
    // 其他数据...
])

// 计算总结果
const totalResult = computed(() => {
    return formulaItems.reduce((sum, item) => {
        return sum + (item.value * (item.ratio || 1))
    }, 0).toLocaleString()
})

// 当前选中项
const selectedItem = ref<string>('stock')

// 处理公式项点击
const handleFormulaClick = (itemId: string) => {
    selectedItem.value = itemId
}

// 过滤后的明细数据
const filteredDetails = computed(() => {
    return detailItems.filter(item => item.itemId === selectedItem.value)
})
</script>

<style scoped lang="scss">
.risk-indicator-detail {    
    background-color: var(--el-bg-color-overlay);
    border: 1px solid var(--el-border-color-light);
    border-radius: 8px;
    margin: 0 auto;    
}

.formula-box {    
    border-radius: 8px;
    padding: 12px 24px 24px 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.formula-content {
    display: flex;
    padding: 0 12px;
    flex-direction: column;
    font-size: 13px;
    gap: 12px;
}
.formula-text{
    display: flex;
    align-items: center;
    // font-size: 14px;
    font-weight: 600;
    line-height: 20px;    
}

.formula-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 12px;    
}

.formula-item {
    padding: 8px 16px;
    background: var(--el-color-primary-light-9);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
        background: var(--el-fill-color);
        transform: translateY(-2px);
    }

    &.active {
        background: var(--el-color-primary);
        color: white;
        box-shadow: 0 2px 6px rgba(64, 158, 255, .3);
    }
}

.result-value {
    font-size: 20px;
    color: var(--el-color-primary);
    font-weight: 600;
}


.operator {
    color: var(--el-text-color-primary);
    padding: 0 12px;    
}

.detail-section {
    padding: 12px 24px 24px 24px;
}

</style>
